<template>
    <div class="systemrole">
        <div class="search">
            <span class="my-btn my-back-blue" @click="addtime">+新增秒杀时间</span>
        </div>
        <el-table :data="timeData" border style="width:100%;">
            <el-table-column prop="id" label="商品秒杀配置编号" width="260"></el-table-column>
            <el-table-column prop="satrtTime" label="开始时间"></el-table-column>
            <el-table-column prop="endTime" label="结束时间"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间"></el-table-column>
            <el-table-column label="操作" width="240">
                <template slot-scope="scope">
                    <span style="color:#007bff;padding:0 6px;" @click="editorClick(scope.row)">编辑</span>
                    <span style="color:#007bff;padding:0 6px;" @click="deleClick(scope.row.id)">删除</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination  
            @size-change="handleSizeChange"  
            @current-change="handleCurrentChange"  
            :current-page="currentPage"  
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"  
            layout="total, sizes, prev, pager, next, jumper"  
            :total="total"
        />
        <!-- <div class="mask" v-if="maskNum">
            <div class="window">
                <div class="window-top">
                    <h3><span v-if="!editNum">新增</span><span v-else>编辑</span>角色</h3>
                    <span @click="down">x</span>
                </div>
                <div class="window-content">
                    <div class="content">
                        <span>开始时间</span>
                        <input type="text" v-model="addtimeData.satrtTime">
                    </div>
                    <div class="content">
                        <span>结束时间</span>
                        <input type="text"  v-model="addtimeData.endTime">
                    </div>
                </div>
                <div style="text-align:center;">
                    <span class="my-btn my-btn-blue" style="padding:8px 30px;" @click="submit">提交</span>
                </div>
            </div>
        </div> -->
        <el-dialog
            :close-on-click-modal="false"
            :title="title"
            :visible.sync="maskNum"
            width="30%"
            top="30vh"
            SeckillTime="group-dialog"
            @close="closeDialog('ruleForm')"
        >
            <el-form :model="addtimeData" ref="ruleForm" :rules="userRules">
                <el-form-item label="开始时间" prop="satrtTime">
                <el-time-picker
                    v-model="addtimeData.satrtTime"
                    :picker-options="{
                        selectableRange:`00:00:00 -${addtimeData.endTime ? addtimeData.endTime+':00' : '23:59:00'}`
                    }"
                    format="HH:mm"
                    value-format="HH:mm"
                    placeholder="请选择开始时间"
                >
                </el-time-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                <el-time-picker
                    v-model="addtimeData.endTime"
                    :picker-options="{
                        selectableRange: `${addtimeData.satrtTime ? addtimeData.satrtTime+':00' : '00:00:00'}-23:59:00`
                    }"
                    format="HH:mm"
                    value-format="HH:mm"
                    placeholder="请选择结束时间"
                >
                </el-time-picker>
                </el-form-item>
                <el-form-item size="large" SeckillTime="btn-wrap" class="btnSubBox">
                    <el-button type="primary" @click="submit('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            //表单验证
            userRules: {
                satrtTime: [
                    { required: true, message: '请选择开始时间', trigger: 'blur' }
                ],
                endTime: [
                    { required: true, message: '请选择结束时间', trigger: 'blur' }
                ],
            },
            type: "",//弹出框的方式
            title: "",//头部显示标题
            formInline: {
                page: "1", // 当前页
                pageSize: "5", // 每页记录数
            },
            
            maskNum:false,//控制弹窗弹出
            timeData:[],//角色数据
            addtimeData:{//新增角色数据
                "endTime": "",
                "satrtTime": ""
            },
            editNum:0,//0--新增，1--编辑
            currentPage:1,//跳转到第几页
            total:0,//总共几条
            
        }
    },
    mounted(){
        this.gettimeData()
    },
    methods:{
        closeDialog(ruleForm) {
            this.$refs[ruleForm].clearValidate()
            this.addtimeData = {
                "endTime": "",
                "satrtTime": ""
            }
        },
        //获取角色数据
        gettimeData(){
            this.axios({
                // url: "/SeckillConfig/listShopSeckillConfig?page="+this.formInline.page+'&pageSize='+this.formInline.pageSize,
                url: "/SeckillConfig/listShopSeckillConfig",
                params:this.formInline,
                method: "get",
            }).then(res=>{
                this.timeData=res.data.data.list
                this.total=res.data.data.total
                console.log('获取秒杀时间数据',res)
            })
        },
        //编辑
        editorClick(row){
            console.log(row)
            this.title = "编辑秒杀时间";
            this.type="edit"
            this.addtimeData=row
            this.maskNum=true
			this.editNum = 1
        },
        //新增角色
        addtime(){
            this.title = "新增秒杀时间";
            this.maskNum=true
			this.editNum = 0
        },
        //提交
        submit(ruleForm){
            this.$refs[ruleForm].validate(valid => {
                if (valid) {
					console.log(this.editNum,111)
                    if(this.editNum == 1){
						
                        var url="/SeckillConfig/updateShopSeckillConfig"
						this.$confirm('是否修改该角色', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							var param=this.addtimeData
							this.axios({
								url: url,
								method: "post",
								data: JSON.stringify(param),
							}).then(res=>{
								this.$message({
									type: 'success',
									message: '修改成功!'
								});
								this.maskNum=false
								this.down()
								this.gettimeData()
							})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消修改'
							});          
						});
                    }else if(this.editNum == 0){
						
                        var url="/SeckillConfig/saveShopSeckillConfig"
						this.$confirm('是否添加该角色', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							var param=this.addtimeData
							this.axios({
								url: url,
								method: "post",
								data: JSON.stringify(param),
							}).then(res=>{
								this.$message({
									type: 'success',
									message:'添加成功!'
								});
								this.maskNum=false
								this.down()
								this.gettimeData()
							})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消添加'
							});          
						});
                    }
                }
            })
        },
        //关闭
        down(ruleForm){
            this.maskNum=false
            this.addtimeData={
                "createTime": "",
                "endTime": "",
                "id": 0,
                "satrtTime": "",
                "updateTime": ""
            }
        },
        //删除角色
        deleClick(id){
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var param={
                    "createTime": "",
                    "endTime": "",
                    "id": id,
                    "satrtTime": "",
                    "updateTime": ""
                }
                this.axios({
                    url: "/SeckillConfig/deleteShopSeckillConfig",
                    method: "post",
                    data: JSON.stringify(param),
                }).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.gettimeData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        //当每页显示条数变化时触发
        handleSizeChange(val){
            this.formInline.pageSize=val
            this.gettimeData()
        },
        //当页数变化时触发
        handleCurrentChange(val){
            this.formInline.page=val
            this.gettimeData()
        },
    },
}
</script>
<style scoped>
/* 弹窗 */
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 80%;
}
.btnSubBox {
    text-align: center;
}
/* 分割线 */
.search{
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
}
.my-btn{
    padding:8px 15px ;
    margin-left: 10px;
    border: 0;
}
.my-btn-blue{
    color: #fff;
    background: #007bff;
}
.my-back-blue{
    color: #007bff;
    background: #007bff2d;
}
.my-back-gray{
    color: #62676d;
    background: #62676d1e;
}
.my-back-green{
    color: #3dc015;
    background: #3dc01518;
}
/* 弹窗开始 
.mask{
    width:100vw;
    height: 100vh;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background: rgba(65, 60, 60, 0.555);
}
.window{
    width: 460px;
    height: 280px;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30px;
}
 弹窗头 
.window-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}
.window-top h3{
    font-weight: 400;
}

 弹窗主体内容 
.window-content{
    margin: 50px 0;
}
.window-content .content{
    text-align: center;
    margin-bottom: 30px;
}
.window-content .content span{
    padding-right: 16px;
}
.window-content .content input{
    width: 280px;
}
弹窗结束 */
</style>